<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>内容管理 - 社交平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    /* 基础样式 */
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f5f7fa;
      color: #333;
      min-height: 100vh;
      margin: 0;
    }
    
    /* 顶部导航 */
    .top-nav {
      height: 50px;
      background-color: #fff;
      border-bottom: 1px solid #eee;
      display: flex;
      align-items: center;
      padding: 0 15px;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0 auto;
    }
    
    .nav-btn {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #666;
      text-decoration: none;
    }
    
    .nav-btn.primary {
      color: #3b82f6;
    }
    
    /* 内容概览 */
    .content-overview {
      background-color: #fff;
      padding: 15px;
      margin-bottom: 10px;
    }
    
    .overview-stats {
      display: flex;
      justify-content: space-between;
    }
    
    .stat-item {
      text-align: center;
      flex: 1;
    }
    
    .stat-value {
      font-size: 18px;
      font-weight: 700;
    }
    
    .stat-label {
      font-size: 12px;
      color: #999;
    }
    
    /* 样式切换器 */
    .style-switcher {
      background-color: #fff;
      padding: 12px 15px;
      border-bottom: 1px solid #eee;
    }
    
    .style-tabs {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding-bottom: 5px;
    }
    
    .style-tabs::-webkit-scrollbar {
      display: none;
    }
    
    .style-tab {
      padding: 6px 14px;
      background-color: #f5f7fa;
      border-radius: 20px;
      font-size: 14px;
      white-space: nowrap;
      cursor: pointer;
    }
    
    .style-tab.active {
      background-color: #3b82f6;
      color: white;
    }
    
    /* 通用内容页面样式 */
    .content-page {
      display: none;
    }
    
    .content-page.active {
      display: block;
    }
    
    /* 筛选栏 */
    .filter-bar {
      display: flex;
      padding: 10px 15px;
      background-color: white;
      border-bottom: 1px solid #eee;
      gap: 10px;
    }
    
    .filter-item {
      flex: 1;
      padding: 6px 0;
      text-align: center;
      font-size: 14px;
      position: relative;
    }
    
    .filter-item::after {
      content: "\f078";
      font-family: "FontAwesome";
      font-size: 12px;
      margin-left: 5px;
      color: #999;
    }
    
    /* 状态标签 */
    .status-tag {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 500;
    }
    
    .status-published {
      background-color: #ecfdf5;
      color: #10b981;
    }
    
    .status-draft {
      background-color: #f3f4f6;
      color: #6b7280;
    }
    
    .status-pending {
      background-color: #fff3cd;
      color: #d97706;
    }
    
    .status-rejected {
      background-color: #fee2e2;
      color: #ef4444;
    }
    
    /* 操作按钮 */
    .action-btn {
      background: none;
      border: none;
      color: #666;
      font-size: 14px;
      padding: 4px 8px;
      border-radius: 4px;
      cursor: pointer;
    }
    
    .action-btn:hover {
      background-color: #f5f7fa;
    }
    
    .action-btn.edit {
      color: #3b82f6;
    }
    
    .action-btn.delete {
      color: #ef4444;
    }
    
    /* 样式1 - 卡片视图 */
    .card-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
      padding: 15px;
    }
    
    .content-card {
      background-color: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      display: flex;
      flex-direction: column;
    }
    
    .card-img {
      width: 100%;
      height: 100px;
      object-fit: cover;
    }
    
    .card-body {
      padding: 12px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    
    .card-title {
      font-size: 14px;
      font-weight: 500;
      margin: 0 0 8px 0;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .card-meta {
      font-size: 11px;
      color: #999;
      margin-bottom: 8px;
    }
    
    .card-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: auto;
    }
    
    /* 样式2 - 列表视图 */
    .content-list {
      padding: 0;
      margin: 0;
      list-style: none;
    }
    
    .list-item {
      background-color: white;
      padding: 15px;
      border-bottom: 1px solid #eee;
      display: flex;
      align-items: center;
    }
    
    .list-img {
      width: 60px;
      height: 60px;
      border-radius: 8px;
      object-fit: cover;
      margin-right: 12px;
    }
    
    .list-content {
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    
    .list-title {
      font-size: 15px;
      font-weight: 500;
      margin: 0 0 4px 0;
    }
    
    .list-meta {
      font-size: 12px;
      color: #999;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .list-actions {
      display: flex;
      gap: 5px;
    }
    
    /* 样式3 - 详情视图 */
    .detail-view {
      padding: 15px;
    }
    
    .detail-header {
      background-color: white;
      border-radius: 12px;
      padding: 15px;
      margin-bottom: 15px;
    }
    
    .detail-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0 0 10px 0;
    }
    
    .detail-image {
      width: 100%;
      border-radius: 8px;
      margin-bottom: 15px;
    }
    
    .detail-content {
      font-size: 15px;
      line-height: 1.6;
      color: #555;
      margin-bottom: 15px;
    }
    
    .detail-stats {
      display: flex;
      justify-content: space-between;
      padding: 10px 0;
      border-top: 1px solid #eee;
      border-bottom: 1px solid #eee;
      margin-bottom: 15px;
    }
    
    .detail-stat {
      display: flex;
      align-items: center;
      gap: 5px;
      color: #666;
      font-size: 14px;
    }
    
    .detail-actions {
      display: flex;
      gap: 10px;
    }
    
    .detail-btn {
      flex: 1;
      padding: 10px;
      border-radius: 8px;
      border: none;
      font-size: 15px;
      font-weight: 500;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
    }
    
    .detail-btn.primary {
      background-color: #3b82f6;
      color: white;
    }
    
    .detail-btn.secondary {
      background-color: #f5f7fa;
      color: #333;
    }
    
    .detail-btn.danger {
      background-color: #fee2e2;
      color: #ef4444;
    }
    
    .related-title {
      font-size: 16px;
      font-weight: 600;
      margin: 20px 0 10px 0;
    }
    
    /* 样式4 - 统计视图 */
    .stats-container {
      padding: 15px;
    }
    
    .stats-card {
      background-color: white;
      border-radius: 12px;
      padding: 15px;
      margin-bottom: 15px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    
    .stats-card-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .period-select {
      font-size: 13px;
      color: #3b82f6;
      background: none;
      border: none;
      padding: 4px 8px;
      cursor: pointer;
    }
    
    .engagement-stats {
      display: flex;
      justify-content: space-between;
      margin-bottom: 15px;
    }
    
    .engagement-item {
      text-align: center;
      flex: 1;
    }
    
    .engagement-value {
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 3px;
    }
    
    .engagement-label {
      font-size: 12px;
      color: #999;
    }
    
    .chart-container {
      height: 180px;
      position: relative;
      margin-bottom: 10px;
    }
    
    .performance-chart {
      display: flex;
      align-items: flex-end;
      height: 100%;
      gap: 8px;
      padding-bottom: 20px;
    }
    
    .chart-bar {
      flex: 1;
      background-color: #dbeafe;
      border-radius: 4px 4px 0 0;
      position: relative;
    }
    
    .chart-bar.highlight {
      background-color: #3b82f6;
    }
    
    .chart-label {
      position: absolute;
      bottom: -20px;
      left: 0;
      right: 0;
      text-align: center;
      font-size: 11px;
      color: #999;
    }
    
    .top-content {
      margin-top: 10px;
    }
    
    .top-item {
      display: flex;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid #eee;
    }
    
    .top-rank {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background-color: #f5f7fa;
      color: #666;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 600;
      margin-right: 10px;
    }
    
    .top-rank.top1 {
      background-color: #fee2e2;
      color: #ef4444;
    }
    
    .top-rank.top2 {
      background-color: #e0f2fe;
      color: #0ea5e9;
    }
    
    .top-rank.top3 {
      background-color: #dcfce7;
      color: #10b981;
    }
    
    .top-title {
      flex: 1;
      font-size: 14px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .top-views {
      font-size: 13px;
      color: #666;
      font-weight: 500;
    }
    
    /* 空状态 */
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 60px 20px;
      text-align: center;
    }
    
    .empty-icon {
      font-size: 60px;
      margin-bottom: 20px;
      color: #cbd5e1;
    }
    
    .empty-text {
      font-size: 16px;
      margin: 0 0 10px 0;
    }
    
    .empty-subtext {
      font-size: 14px;
      color: #94a3b8;
      margin: 0 0 20px 0;
    }
    
    .empty-btn {
      padding: 8px 16px;
      background-color: #3b82f6;
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 14px;
      cursor: pointer;
    }
    
    /* 提示框 */
    .toast {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background-color: rgba(0,0,0,0.8);
      color: white;
      border-radius: 8px;
      padding: 10px 15px;
      font-size: 14px;
      z-index: 1000;
      display: none;
    }
    
    /* 新建按钮 */
    .create-btn {
      position: fixed;
      bottom: 20px;
      right: 20px;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background-color: #3b82f6;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
      text-decoration: none;
      z-index: 90;
    }
  </style>
</head>
<body>
  <!-- 提示框 -->
  <div class="toast" id="toast"></div>
  
  <!-- 新建内容按钮 -->
  <a href="#" class="create-btn" id="createBtn">
    <i class="fa fa-plus"></i>
  </a>
  
  <!-- 顶部导航 -->
  <nav class="top-nav">
    <a href="#" class="nav-btn" id="backBtn">
      <i class="fa fa-angle-left"></i>
    </a>
    <h1 class="nav-title">内容管理</h1>
    <a href="#" class="nav-btn primary" id="searchBtn">
      <i class="fa fa-search"></i>
    </a>
  </nav>
  
  <!-- 内容概览 -->
  <div class="content-overview">
    <div class="overview-stats">
      <div class="stat-item">
        <div class="stat-value">24</div>
        <div class="stat-label">已发布</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">8</div>
        <div class="stat-label">草稿</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">2</div>
        <div class="stat-label">审核中</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">128.5k</div>
        <div class="stat-label">总浏览</div>
      </div>
    </div>
  </div>
  
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="style-tabs">
      <div class="style-tab active" data-style="card">卡片视图</div>
      <div class="style-tab" data-style="list">列表视图</div>
      <div class="style-tab" data-style="detail">详情视图</div>
      <div class="style-tab" data-style="stats">数据统计</div>
    </div>
  </div>
  
  <!-- 筛选栏 -->
  <div class="filter-bar">
    <div class="filter-item">全部类型</div>
    <div class="filter-item">全部状态</div>
    <div class="filter-item">最近30天</div>
  </div>
  
  <!-- 卡片视图样式 -->
  <div class="content-page active" id="card">
    <div class="card-grid">
      <div class="content-card">
        <img src="https://picsum.photos/seed/post1/300/200" alt="文章缩略图" class="card-img">
        <div class="card-body">
          <h3 class="card-title">前端开发最新趋势分析</h3>
          <div class="card-meta">2023-06-15 · 1.2k浏览</div>
          <div class="card-footer">
            <span class="status-tag status-published">已发布</span>
            <div>
              <button class="action-btn edit"><i class="fa fa-pencil"></i></button>
            </div>
          </div>
        </div>
      </div>
      
      <div class="content-card">
        <img src="https://picsum.photos/seed/post2/300/200" alt="文章缩略图" class="card-img">
        <div class="card-body">
          <h3 class="card-title">JavaScript性能优化技巧</h3>
          <div class="card-meta">2023-06-10 · 3.5k浏览</div>
          <div class="card-footer">
            <span class="status-tag status-published">已发布</span>
            <div>
              <button class="action-btn edit"><i class="fa fa-pencil"></i></button>
            </div>
          </div>
        </div>
      </div>
      
      <div class="content-card">
        <img src="https://picsum.photos/seed/post3/300/200" alt="文章缩略图" class="card-img">
        <div class="card-body">
          <h3 class="card-title">React vs Vue：2023年对比</h3>
          <div class="card-meta">2023-06-05 · 5.8k浏览</div>
          <div class="card-footer">
            <span class="status-tag status-published">已发布</span>
            <div>
              <button class="action-btn edit"><i class="fa fa-pencil"></i></button>
            </div>
          </div>
        </div>
      </div>
      
      <div class="content-card">
        <img src="https://picsum.photos/seed/post4/300/200" alt="文章缩略图" class="card-img">
        <div class="card-body">
          <h3 class="card-title">CSS Grid布局完全指南</h3>
          <div class="card-meta">未发布</div>
          <div class="card-footer">
            <span class="status-tag status-draft">草稿</span>
            <div>
              <button class="action-btn edit"><i class="fa fa-pencil"></i></button>
            </div>
          </div>
        </div>
      </div>
      
      <div class="content-card">
        <img src="https://picsum.photos/seed/post5/300/200" alt="文章缩略图" class="card-img">
        <div class="card-body">
          <h3 class="card-title">WebAssembly入门教程</h3>
          <div class="card-meta">2023-05-28 · 2.1k浏览</div>
          <div class="card-footer">
            <span class="status-tag status-published">已发布</span>
            <div>
              <button class="action-btn edit"><i class="fa fa-pencil"></i></button>
            </div>
          </div>
        </div>
      </div>
      
      <div class="content-card">
        <img src="https://picsum.photos/seed/post6/300/200" alt="文章缩略图" class="card-img">
        <div class="card-body">
          <h3 class="card-title">移动端适配最佳实践</h3>
          <div class="card-meta">审核中</div>
          <div class="card-footer">
            <span class="status-tag status-pending">审核中</span>
            <div>
              <button class="action-btn edit"><i class="fa fa-pencil"></i></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 列表视图样式 -->
  <div class="content-page" id="list">
    <ul class="content-list">
      <li class="list-item">
        <img src="https://picsum.photos/seed/post1/300/200" alt="文章缩略图" class="list-img">
        <div class="list-content">
          <h3 class="list-title">前端开发最新趋势分析</h3>
          <div class="list-meta">
            <span>2023-06-15</span>
            <span>1.2k浏览</span>
            <span class="status-tag status-published">已发布</span>
          </div>
        </div>
        <div class="list-actions">
          <button class="action-btn edit"><i class="fa fa-pencil"></i></button>
          <button class="action-btn delete"><i class="fa fa-trash"></i></button>
        </div>
      </li>
      
      <li class="list-item">
        <img src="https://picsum.photos/seed/post2/300/200" alt="文章缩略图" class="list-img">
        <div class="list-content">
          <h3 class="list-title">JavaScript性能优化技巧</h3>
          <div class="list-meta">
            <span>2023-06-10</span>
            <span>3.5k浏览</span>
            <span class="status-tag status-published">已发布</span>
          </div>
        </div>
        <div class="list-actions">
          <button class="action-btn edit"><i class="fa fa-pencil"></i></button>
          <button class="action-btn delete"><i class="fa fa-trash"></i></button>
        </div>
      </li>
      
      <li class="list-item">
        <img src="https://picsum.photos/seed/post3/300/200" alt="文章缩略图" class="list-img">
        <div class="list-content">
          <h3 class="list-title">React vs Vue：2023年对比</h3>
          <div class="list-meta">
            <span>2023-06-05</span>
            <span>5.8k浏览</span>
            <span class="status-tag status-published">已发布</span>
          </div>
        </div>
        <div class="list-actions">
          <button class="action-btn edit"><i class="fa fa-pencil"></i></button>
          <button class="action-btn delete"><i class="fa fa-trash"></i></button>
        </div>
      </li>
      
      <li class="list-item">
        <img src="https://picsum.photos/seed/post4/300/200" alt="文章缩略图" class="list-img">
        <div class="list-content">
          <h3 class="list-title">CSS Grid布局完全指南</h3>
          <div class="list-meta">
            <span>未发布</span>
            <span class="status-tag status-draft">草稿</span>
          </div>
        </div>
        <div class="list-actions">
          <button class="action-btn edit"><i class="fa fa-pencil"></i></button>
          <button class="action-btn delete"><i class="fa fa-trash"></i></button>
        </div>
      </li>
      
      <li class="list-item">
        <img src="https://picsum.photos/seed/post6/300/200" alt="文章缩略图" class="list-img">
        <div class="list-content">
          <h3 class="list-title">移动端适配最佳实践</h3>
          <div class="list-meta">
            <span>审核中</span>
            <span class="status-tag status-pending">审核中</span>
          </div>
        </div>
        <div class="list-actions">
          <button class="action-btn edit"><i class="fa fa-pencil"></i></button>
          <button class="action-btn delete"><i class="fa fa-trash"></i></button>
        </div>
      </li>
    </ul>
  </div>
  
  <!-- 详情视图样式 -->
  <div class="content-page" id="detail">
    <div class="detail-view">
      <div class="detail-header">
        <h2 class="detail-title">React vs Vue：2023年对比分析</h2>
        <img src="https://picsum.photos/seed/post3/600/300" alt="文章封面" class="detail-image">
        
        <p class="detail-content">
          本文将深入对比React和Vue这两个流行的前端框架，从性能、生态系统、学习曲线和企业应用等多个维度进行分析，帮助开发者在2023年做出更适合自己项目的技术选择。
          <br><br>
          随着前端技术的快速发展，React和Vue都在不断迭代更新，本文将基于最新版本进行客观比较，涵盖核心特性、性能优化、社区支持等关键因素。
        </p>
        
        <div class="detail-stats">
          <div class="detail-stat">
            <i class="fa fa-eye"></i>
            <span>5.8k 浏览</span>
          </div>
          <div class="detail-stat">
            <i class="fa fa-comment"></i>
            <span>42 评论</span>
          </div>
          <div class="detail-stat">
            <i class="fa fa-heart"></i>
            <span>256 点赞</span>
          </div>
          <div class="detail-stat">
            <i class="fa fa-share-alt"></i>
            <span>38 分享</span>
          </div>
        </div>
        
        <div class="detail-meta" style="font-size:13px; color:#666; margin-bottom:15px;">
          <div>发布时间：2023-06-05</div>
          <div>分类：前端技术</div>
          <div>标签：React, Vue, 前端框架</div>
        </div>
        
        <div class="detail-actions">
          <button class="detail-btn primary">
            <i class="fa fa-edit"></i> 编辑
          </button>
          <button class="detail-btn secondary">
            <i class="fa fa-copy"></i> 复制
          </button>
          <button class="detail-btn danger">
            <i class="fa fa-trash"></i> 删除
          </button>
        </div>
      </div>
      
      <h3 class="related-title">相关内容</h3>
      <ul class="content-list">
        <li class="list-item">
          <img src="https://picsum.photos/seed/post2/300/200" alt="文章缩略图" class="list-img">
          <div class="list-content">
            <h3 class="list-title">JavaScript性能优化技巧</h3>
            <div class="list-meta">
              <span>2023-06-10</span>
              <span>3.5k浏览</span>
            </div>
          </div>
        </li>
        
        <li class="list-item">
          <img src="https://picsum.photos/seed/post5/300/200" alt="文章缩略图" class="list-img">
          <div class="list-content">
            <h3 class="list-title">WebAssembly入门教程</h3>
            <div class="list-meta">
              <span>2023-05-28</span>
              <span>2.1k浏览</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
  
  <!-- 数据统计视图样式 -->
  <div class="content-page" id="stats">
    <div class="stats-container">
      <div class="stats-card">
        <div class="stats-card-title">
          <span>内容表现总览</span>
          <select class="period-select">
            <option>近7天</option>
            <option selected>近30天</option>
            <option>近90天</option>
          </select>
        </div>
        
        <div class="engagement-stats">
          <div class="engagement-item">
            <div class="engagement-value">128.5k</div>
            <div class="engagement-label">总浏览量</div>
          </div>
          <div class="engagement-item">
            <div class="engagement-value">3.2k</div>
            <div class="engagement-label">总互动</div>
          </div>
          <div class="engagement-item">
            <div class="engagement-value">24</div>
            <div class="engagement-label">发布内容</div>
          </div>
          <div class="engagement-item">
            <div class="engagement-value">4.8%</div>
            <div class="engagement-label">互动率</div>
          </div>
        </div>
        
        <div class="chart-container">
          <div class="performance-chart">
            <div class="chart-bar" style="height:40%">
              <div class="chart-label">5/1</div>
            </div>
            <div class="chart-bar" style="height:55%">
              <div class="chart-label">5/8</div>
            </div>
            <div class="chart-bar" style="height:62%">
              <div class="chart-label">5/15</div>
            </div>
            <div class="chart-bar" style="height:48%">
              <div class="chart-label">5/22</div>
            </div>
            <div class="chart-bar" style="height:70%">
              <div class="chart-label">5/29</div>
            </div>
            <div class="chart-bar highlight" style="height:85%">
              <div class="chart-label">6/5</div>
            </div>
            <div class="chart-bar" style="height:68%">
              <div class="chart-label">6/12</div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="stats-card">
        <div class="stats-card-title">
          <span>内容类型分布</span>
        </div>
        
        <div class="category-items" style="border-radius: 8px; overflow: hidden;">
          <div class="category-record">
            <div class="record-icon icon-in" style="background-color:#dbeafe; color:#3b82f6;">
              <i class="fa fa-file-text-o"></i>
            </div>
            <div class="record-info">
              <div class="record-name">技术文章</div>
              <div class="record-time">14篇 (58%)</div>
            </div>
            <div class="simple-amount">78.2k 浏览</div>
          </div>
          
          <div class="category-record">
            <div class="record-icon icon-in" style="background-color:#e0f2fe; color:#0ea5e9;">
              <i class="fa fa-code"></i>
            </div>
            <div class="record-info">
              <div class="record-name">教程指南</div>
              <div class="record-time">6篇 (25%)</div>
            </div>
            <div class="simple-amount">32.5k 浏览</div>
          </div>
          
          <div class="category-record">
            <div class="record-icon icon-in" style="background-color:#fce7f3; color:#db2777;">
              <i class="fa fa-comments"></i>
            </div>
            <div class="record-info">
              <div class="record-name">观点讨论</div>
              <div class="record-time">4篇 (17%)</div>
            </div>
            <div class="simple-amount">17.8k 浏览</div>
          </div>
        </div>
      </div>
      
      <div class="stats-card">
        <div class="stats-card-title">
          <span>热门内容排行</span>
        </div>
        
        <div class="top-content">
          <div class="top-item">
            <div class="top-rank top1">1</div>
            <div class="top-title">React vs Vue：2023年对比</div>
            <div class="top-views">5.8k</div>
          </div>
          
          <div class="top-item">
            <div class="top-rank top2">2</div>
            <div class="top-title">JavaScript性能优化技巧</div>
            <div class="top-views">3.5k</div>
          </div>
          
          <div class="top-item">
            <div class="top-rank top3">3</div>
            <div class="top-title">WebAssembly入门教程</div>
            <div class="top-views">2.1k</div>
          </div>
          
          <div class="top-item">
            <div class="top-rank">4</div>
            <div class="top-title">前端开发最新趋势分析</div>
            <div class="top-views">1.2k</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 空状态示例 (默认隐藏) -->
  <div class="empty-state" style="display: none;">
    <div class="empty-icon">
      <i class="fa fa-file-text-o"></i>
    </div>
    <h3 class="empty-text">暂无内容</h3>
    <p class="empty-subtext">您还没有发布任何内容，开始创建第一条内容吧</p>
    <button class="empty-btn">创建内容</button>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 获取元素
    const styleTabs = document.querySelectorAll('.style-tab');
    const contentPages = document.querySelectorAll('.content-page');
    const filterItems = document.querySelectorAll('.filter-item');
    const actionBtns = document.querySelectorAll('.action-btn');
    const detailBtns = document.querySelectorAll('.detail-btn');
    const backBtn = document.getElementById('backBtn');
    const searchBtn = document.getElementById('searchBtn');
    const createBtn = document.getElementById('createBtn');
    const periodSelect = document.querySelector('.period-select');
    const toast = document.getElementById('toast');
    
    // 样式切换
    styleTabs.forEach(tab => {
      tab.addEventListener('click', function() {
        // 移除所有激活状态
        styleTabs.forEach(t => t.classList.remove('active'));
        contentPages.forEach(page => page.classList.remove('active'));
        
        // 设置当前激活状态
        this.classList.add('active');
        const style = this.getAttribute('data-style');
        document.getElementById(style).classList.add('active');
        
        showToast(`已切换到${this.textContent}`);
      });
    });
    
    // 筛选项点击事件
    filterItems.forEach(item => {
      item.addEventListener('click', function() {
        showToast(`筛选：${this.textContent}`);
        // 实际应用中可打开筛选弹窗
      });
    });
    
    // 操作按钮点击事件
    actionBtns.forEach(btn => {
      btn.addEventListener('click', function() {
        const action = this.classList.contains('edit') ? '编辑' : '删除';
        const title = this.closest('.content-card, .list-item').querySelector('.card-title, .list-title').textContent;
        
        if (action === '删除') {
          if (confirm(`确定要删除 "${title}" 吗？`)) {
            showToast(`已${action} "${title}"`);
          }
        } else {
          showToast(`正在${action} "${title}"`);
        }
      });
    });
    
    // 详情页按钮点击事件
    detailBtns.forEach(btn => {
      btn.addEventListener('click', function() {
        const action = this.textContent.trim().split(' ')[1];
        showToast(`正在${action}内容`);
      });
    });
    
    // 时间周期选择事件
    periodSelect.addEventListener('change', function() {
      showToast(`已切换到${this.value}数据`);
    });
    
    // 返回按钮点击事件
    backBtn.addEventListener('click', function() {
      showToast('返回上一页');
      // 实际应用中可以使用history.back()
    });
    
    // 搜索按钮点击事件
    searchBtn.addEventListener('click', function() {
      showToast('搜索内容');
    });
    
    // 新建按钮点击事件
    createBtn.addEventListener('click', function() {
      showToast('创建新内容');
    });
    
    // 显示提示
    function showToast(message) {
      toast.textContent = message;
      toast.style.display = 'block';
      
      setTimeout(() => {
        toast.style.display = 'none';
      }, 2000);
    }
  </script>
</body>
</html>
